<template>
  <!--默认使用方法-->
  <h1>默认使用方法</h1>
  <div>Parent bound v-model is: {{ model }}</div>
  <div>person is: {{ person }}</div>
  <button @click="update">Increment</button>
</template>


<script setup lang="ts">
  import { reactive, readonly, toRaw} from 'vue'

  const model = defineModel()
  console.log('model的结构：', model)

  // 定义一个 数据
  const person = reactive({
    name: '',
    age: 20,
    info: {
      name:''
    }
  })

  // 只读的，暴露出去，不让改
  const read = readonly(person)
 
  // 不让改？我取原型，再套上 reactive如何？
  const a = toRaw(read) // 普通对象
  const aa = reactive(a) // 内部有个池子，直接获取 reactive，而不会创建新的。
  console.log('aa：', aa) // reactive
  console.log('aa === person::', aa === person) // true
  // 现在可以改 aa 了，而且会响应给 person
  aa.name += 'qq'

  function update() {
    model.value += '--'
    aa.name += 'qq'
  }
</script>